<template>
  <div class="food_msg">
      <div class="food">
          <h1>{{msg.name}}</h1>
          <div class="header">
              <img class="image" :src="msg.pic" alt="">
              <div>
                  <h2>配料</h2>
                  <div class="burden">
                    <div v-for="f in msg.material" :key="f.type">
                  <div>{{f.mname}}:<span>{{f.amount}}</span></div>
                </div>
              </div>
              </div>
          </div>
          <div class="process">
            <h2>做法步骤</h2>
            <div v-for="a in msg.process" :key="1">
              <div>{{a.pcontent}}</div>
              <img :src="a.pic" alt="">
            </div>
          </div>    
      </div>
  </div>
</template>
<script>
import {
  getAllTypes,
  getFoodsByPage,
  getFoodDetail,
  getFoodByKeyWord
} from "../services/foods";
export default {
  name: "FoodMsg",
  data() {
    return {
      id: "",
      msg: {}
    };
  },
  created() {
    this.id = this.$route.query.id;
    getFoodDetail(this.id).then(res => {
      this.msg = res.data.result;
      console.log(res.data.result);
    });
  }
};
</script>
<style>
.food h1 {
  text-align: center;
}
.food .header{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header .image {
  width: 250px;
  height: 250px;
  border-radius: 50%;
}
.burden {
  border: 1px solid #aaa;
  font-size: 2rem;
  padding: 15px;
}
.process {
  text-align: center;
  border: 1px solid #aaa;
}
</style>


